<template>
	<view class="w-100">
		<view class="fixed-top flex-1">
			<view class="flex-1 mx-4 data-box">
				<view class="flex-1 row-ac">
					<view class="row-a-j-fc flex-1 data-box">
						<view class="font-s-4"><text class="iconfont icon-tuiguangzhuanqian mr-1"></text>我的余额</view>
						<view class="mt-1 font-s-7 font-w text-main-color"><text
								class="font-s-2 mr-1">¥</text>{{ dividendreport.total_dividend_amount +  dividendreport.total_bonus_amount | num2Filter  }}
						</view>
					</view>
					<view class="flex-1 row data-box  font-s-65"
						@click="navTo('/pages/user/operation/dividend-extract')">前往提现</view>
				</view>

			</view>
			<view class="flex-1 row-ac top-box">
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.dividend_amount_minus }}</view>
					<view class="font-s-3 mt-1">分红已提现</view>
				</view>
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.dividend_amount_add }}</view>
					<view class="font-s-3 mt-1">累计分红</view>
				</view>
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.total_dividend_amount }}</view>
					<view class="font-s-3 mt-1">分红余额</view>
				</view>
			</view>
			<view class="flex-1 row-ac top-box">
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.bonus_amount_minus }}</view>
					<view class="font-s-3 mt-1">区域奖金已提现</view>
				</view>
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.bonus_amount_add }}</view>
					<view class="font-s-3 mt-1">累计区域奖金</view>
				</view>
				<view class="data-box flex-1 row-a-j-fc">
					<view class="font-s-45 font-w text-main-color">{{ dividendreport.total_bonus_amount }}</view>
					<view class="font-s-3 mt-1">区域奖金</view>
				</view>
			</view>
		</view>
		<view class="flex-1" style="height: 480rpx;"></view>
		<view class="flex-1 mx-3">
			<view class="py-4 font-s-4">分红收益明细</view>
			<view class="flex-1 dividend-box row-ac font-s-3 text-muted border-bottom">
				<view class="dividend-index row">序号</view>
				<view class="dividend-amount row">金额</view>
				<view class="dividend-type row">类型</view>
				<view class="dividend-notes row">备注</view>
				<view class="dividend-time row">时间</view>
			</view>
			<view class="flex-1">
				<view class="flex-1 dividend-box row-ac mt-1 font-s-3 border-bottom"
					v-for="(item,index) in regionaldividendlist" :key="index">
					<view class="dividend-index row">{{ index + 1 }}</view>
					<view class="dividend-amount row">{{ item.dividend_amount | num2Filter}}</view>
					<view class="dividend-type row">{{ item.dividend_type | dividendFilter }}</view>
					<view class="dividend-notes row font-s-2">{{ item.dividend_notes }}</view>
					<view class="dividend-time row font-s-2">{{ item.create_time }}</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		regionaldividendlistUrl,
		regionaldividendreportUrl
	} from "@/api/index.js"
	export default {
		data() {
			return {
				queryInfo: {
					page_size: 10
				},
				regionaldividendlist: [],
				dividendreport: {
					total_dividend_amount: 0,
					dividend_amount_add: 0,
					dividend_amount_minus: 0,
					dividend_amount_extract: 0,
					total_bonus_amount: 0,
					bonus_amount_add: 0,
					bonus_amount_minus: 0,
					bonus_amount_extract: 0
				}
			}
		},
		filters: {
			dividendFilter(type) {
				if (type === 0) {
					return '分红'
				} else if (type === 1) {
					return '提现'
				} else if (type === 2) {
					return '提现中'
				}
			},
			num2Filter(value) {
				let realVal = parseFloat(value).toFixed(2);
				return realVal;
			}
		},
		onShow() {
			this.getRegionaldividendlist()
			this.getRegionaldividendreport()
		},
		onLoad() {
			this.getRegionaldividendlist()
			this.getRegionaldividendreport()
		},
		methods: {
			getRegionaldividendlist() {
				this.$R.get(regionaldividendlistUrl, this.queryInfo).then(res => {
					if (res.code == 200) {
						this.regionaldividendlist = res.data.list
						this.regionaldividendTotal = res.data.total
					}
				})
			},
			getRegionaldividendreport() {
				this.$R.get(regionaldividendreportUrl).then(res => {
					if (res.code == 200) {
						this.dividendreport = res.data
						console.log(this.dividendreport);
					}
				})
			},
			navTo(url) {
				uni.navigateTo({
					url: url,
				});
			}
		}
	}
</script>

<style>
	.top-box {
		background-color: #f5f5f5;
	}

	.data-box {
		height: 160rpx;
	}

	.dividend-index {
		width: 100rpx;
		height: 66rpx;
	}

	.dividend-amount {
		flex: 1;
		height: 66rpx;
	}

	.dividend-type {
		width: 100rpx;
		height: 66rpx;
	}

	.dividend-notes {
		width: 210rpx;
		height: 66rpx;
	}

	.dividend-time {
		width: 120rpx;
		height: 66rpx;
	}
</style>